
<template>
  <img :src="image" v-lazy v-if="async" class="x-image" />
</template>

<script>
  import ala from 'ala'
  export default {
    name: 'x-image',
    props: {
      src: {}
    },
    model: {
      event: 'change',
      prop: 'src'
    },
    data () {
      return {
        image: {},
        async: false
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {
        this.image = this.$ala.urlImage(this.src)
        this.async = true
      }
    },
    watch: {
      viewModel: {
        deep: true,
        handler (val) {
          this.$emit('change', this.image)
        }
      },
      src: {
        deep: true,
        handler (val) {
          this.init()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~_style/theme.scss";
  .zk-image {
    font-size: $gl-size-base;
    a {
      display: block;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
